<template>
  <div v-if="data.length > 0" class="chart">
    <echart-div :options="chartOption" :height="height" />
    <div class="content-title" style="color: white">
      <div class="content-title-l"></div>
      <span>项目数量构成</span>
    </div>
    <el-row>
      <div class="image">
        <echartDiv
          :options="compositionOption"
          :height="height"
        />
      </div>
    </el-row>
    <div class="content-title" style="color: white">
      <div class="content-title-l"></div>
      <span>项目投资构成</span>
    </div>
    <el-row>
      <div class="image">
        <echartDiv
          :options="investmentOption"
          :height="height"
        />
      </div>
    </el-row>
  </div>
</template>

<script>
import echartDiv from '@/components/echart/index'

const getLinearColor = function (color1, color2, pos) {
  const p = Object.assign(
    { x: 0.5, y: 0, x2: 0.5, y2: 1 },
    pos
  )
  return {
    type: 'linear',
    ...p,
    colorStops: [
      {
        offset: 0,
        color: color1
      },
      {
        offset: 1,
        color: color2
      }
    ],
    global: false
  }
}

export default {
  components: {
    echartDiv
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartOption: {},
      compositionOption: {},
      investmentOption: {},
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['项目数量', '项目投资额']
        },
        grid: {
          left: '0%',
          right: '0%',
          top: '20%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '住宅用地',
              '公服配套',
              '生态景观',
              '其他项目'
            ],
            axisTick: {
              show: false
              // 去除刻度
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '个',
            nameTextStyle: {
              color: '#fff',
              padding: [0, 0, 0, -35]
            },
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            }
          },
          {
            type: 'value',
            name: '万元',
            nameTextStyle: {
              color: '#fff',
              padding: [0, -35, 0, 0]
            },
            interval: 50,
            axisLabel: {
              formatter: '{value}',
              color: '#fff'
            },
            axisLine: {
              show: false
              // lineStyle: {
              //   color: '#fff'
              // }
            }
          }
        ],
        series: [
          {
            name: '项目数量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            barWidth: '30%',
            itemStyle: {
              normal: {
                color: getLinearColor(
                  'rgba(0, 114, 202, 1)',
                  'rgba(0, 255, 255, 1)'
                )
              }
            },
            data: [100, 160, 136, 88]
          },
          {
            name: '项目投资额',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C'
              }
            },
            lineStyle: {
              color: '#00FFF6'
            },
            symbolSize: 10,
            itemStyle: {
              color: '#00FFF6',
              borderColor: '#00FFF6',
              borderWidth: 2
            },
            data: [89, 171, 154, 88]
          }
        ]
      },
      options: {
        legend: {
          orient: 'vertical',
          right: 'right',
          // padding:[5,5],
          itemGap: 15,
          itemWidth: 7,
          itemHeight: 7,
          x: '55%',
          y: '24%',
          textStyle: {
            color: '#fff'
          },
          itemStyle: {
            borderType: 'solid'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['38%', '52%'],
            center: ['25%', '53%'],
            animation: false,
            label: {
              show: false,
              color: '#fff'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {d}%',
              position: function (
                point,
                params,
                dom,
                rect,
                size
              ) {
                //  size为当前窗口大小
                if (size.viewSize[0] / 2 >= point[0]) {
                  // 其中point为当前鼠标的位置,在左侧
                  return { right: point[0], top: point[1] }
                } else {
                  // 其中point为当前鼠标的位置
                  return {
                    right: point[0] - size.viewSize[0] / 2,
                    top: point[1]
                  }
                }
              }
            },
            // emphasis: {
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   }
            // },
            labelLine: {
              show: true
            },
            data: [
              {
                value: 8,
                name: '基础设施',
                itemStyle: {
                  color: '#696DFF'
                }
              },
              {
                value: 6,
                name: '公服配套',
                itemStyle: {
                  color: '#00FFFF'
                }
              },
              {
                value: 11,
                name: '生态景观',
                itemStyle: {
                  color: '#00D075'
                }
              },
              {
                value: 11,
                name: '项目状况',
                itemStyle: {
                  color: '#368EFC'
                }
              }
            ]
          }
        ]
      },
      height: 180
    }
  },
  mounted() {
    // const echart = echarts.init(this.$refs.chart)
    // echart.setOption({
    //
    // })
    // window.addEventListener('resize', function() {
    //   echart.resize()
    // })
  },
  watch: {
    data(val) {
      this.chartOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['项目数量', '项目投资额']
        },
        grid: {
          left: '10%',
          right: '5%',
          top: '20%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: val.map((item) => item.type),
            axisTick: {
              show: false
              // 去除刻度
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#fff',
                fontSize: 12
              },
              rotate: 45
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '个',
            nameTextStyle: {
              color: '#fff',
              padding: [0, 0, 0, -35]
            },
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            }
          },
          {
            type: 'value',
            name: '万元',
            nameTextStyle: {
              color: '#fff',
              padding: [0, -35, 0, 0]
            },
            // interval: 1000,
            axisLabel: {
              formatter: '{value}',
              color: '#fff'
            },
            axisLine: {
              show: false
              // lineStyle: {
              //   color: '#fff'
              // }
            }
          }
        ],
        series: [
          {
            name: '项目数量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            barWidth: '30%',
            itemStyle: {
              normal: {
                color: getLinearColor(
                  'rgba(0, 114, 202, 1)',
                  'rgba(0, 255, 255, 1)'
                )
              }
            },
            data: val.map((item) => item.count)
          },
          {
            name: '项目投资额',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C'
              }
            },
            lineStyle: {
              color: '#00FFF6'
            },
            symbolSize: 10,
            itemStyle: {
              color: '#00FFF6',
              borderColor: '#00FFF6',
              borderWidth: 2
            },
            data: val.map((item) => item.amount)
          }
        ]
      }
      this.compositionOption = {
        // legend: {
        //   orient: 'vertical',
        //   right: 'right',
        //   // padding:[5,5],
        //   itemGap: 15,
        //   itemWidth: 7,
        //   itemHeight: 7,
        //   x: '55%',
        //   top: 'middle',
        //   textStyle: {
        //     color: '#fff'
        //   },
        //   itemStyle: {
        //     borderType: 'solid'
        //   }
        // },
        // tooltip: {
        //   trigger: 'item'
        // },
        // series: [
        //   {
        //     name: 'Access From',
        //     type: 'pie',
        //     radius: ['38%', '52%'],
        //     center: ['25%', '53%'],
        //     grid: {
        //       top: '0%',
        //       bottom: '0%',
        //       left: '0%',
        //       right: '0%'
        //     },
        //     label: {
        //       show: false,
        //       color: '#fff'
        //     },
        //     tooltip: {
        //       trigger: 'item',
        //       formatter: '{b}: {d}%',
        //       position: function(point, params, dom, rect, size) {
        //         //  size为当前窗口大小
        //         if ((size.viewSize[0] / 2) >= point[0]) {
        //           // 其中point为当前鼠标的位置,在左侧
        //           return { right: point[0], top: point[1] }
        //         } else {
        //           // 其中point为当前鼠标的位置
        //           return { right: point[0] - size.viewSize[0] / 2, top: point[1] }
        //         }
        //       }
        //     },
        //     emphasis: {
        //       label: {
        //         show: true,
        //         fontSize: '14',
        //         fontWeight: 'bold'
        //       }
        //     },
        //     data: val.map((item) => {
        //       return {
        //         value: item.count,
        //         name: item.type
        //       }
        //     })
        //   }
        // ]
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          bottom: 'bottom',
          itemWidth: 7,
          itemHeight: 7,
          x: '10%',
          textStyle: {
            color: '#fff'
          },
          itemStyle: {
            borderType: 'solid'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '50%'],
            animation: false,
            label: {
              show: true,
              color: '#fff',
              position: 'top',
              formatter: function (item) {
                return item.value
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {d}%',
              position: function (
                point,
                params,
                dom,
                rect,
                size
              ) {
                //  size为当前窗口大小
                if (size.viewSize[0] / 2 >= point[0]) {
                  // 其中point为当前鼠标的位置,在左侧
                  return { right: point[0], top: point[1] }
                } else {
                  // 其中point为当前鼠标的位置
                  return {
                    right: point[0] - size.viewSize[0] / 2,
                    top: point[1]
                  }
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: true
            },
            data: val.map((item) => {
              return {
                value: item.count,
                name: item.type
              }
            })
          }
        ]
      }
      this.investmentOption = {
        // legend: {
        //   orient: 'vertical',
        //   right: 'right',
        //   // padding:[5,5],
        //   itemGap: 15,
        //   itemWidth: 7,
        //   itemHeight: 7,
        //   x: '55%',
        //   top: 'middle',
        //   textStyle: {
        //     color: '#fff'
        //   },
        //   itemStyle: {
        //     borderType: 'solid'
        //   }
        // },
        // tooltip: {
        //   trigger: 'item'
        // },
        // series: [
        //   {
        //     name: 'Access From',
        //     type: 'pie',
        //     radius: ['38%', '52%'],
        //     center: ['25%', '53%'],
        //     grid: {
        //       top: '0%',
        //       bottom: '0%',
        //       left: '0%',
        //       right: '0%'
        //     },
        //     label: {
        //       show: false,
        //       color: '#fff'
        //     },
        //     tooltip: {
        //       trigger: 'item',
        //       formatter: '{b}: {d}%',
        //       position: function(point, params, dom, rect, size) {
        //         //  size为当前窗口大小
        //         if ((size.viewSize[0] / 2) >= point[0]) {
        //           // 其中point为当前鼠标的位置,在左侧
        //           return { right: point[0], top: point[1] }
        //         } else {
        //           // 其中point为当前鼠标的位置
        //           return { right: point[0] - size.viewSize[0] / 2, top: point[1] }
        //         }
        //       }
        //     },
        //     emphasis: {
        //       label: {
        //         show: true,
        //         fontSize: '14',
        //         fontWeight: 'bold'
        //       }
        //     },
        //     data: val.map((item) => {
        //       return {
        //         value: item.amount,
        //         name: item.type
        //       }
        //     })
        //   }
        // ]
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          bottom: 'bottom',
          itemWidth: 7,
          itemHeight: 7,
          x: '10%',
          textStyle: {
            color: '#fff'
          },
          itemStyle: {
            borderType: 'solid'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '50%'],
            animation: false,
            label: {
              show: true,
              color: '#fff',
              position: 'top',
              formatter: function (item) {
                return item.value
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {d}%',
              position: function (
                point,
                params,
                dom,
                rect,
                size
              ) {
                //  size为当前窗口大小
                if (size.viewSize[0] / 2 >= point[0]) {
                  // 其中point为当前鼠标的位置,在左侧
                  return { right: point[0], top: point[1] }
                } else {
                  // 其中point为当前鼠标的位置
                  return {
                    right: point[0] - size.viewSize[0] / 2,
                    top: point[1]
                  }
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: true
            },
            data: val.map((item) => {
              return {
                value: item.amount,
                name: item.type
              }
            })
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.size12 {
  font-size: 12px;
}

.background_image {
  height: 40px;
  line-height: 40px;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
  margin-top: 10px;
  background-image: url('../../../../../public/img/basemaps/yjkb5.png');
  background-size: cover;
}

.chart {
  margin-top: 14px;
}

.image {
  position: relative;
  height: 100%;
  width: 100%;
  //&::before {
  //  position: absolute;
  //  left: 25%;
  //  top: 96px;
  //  transform: translate(-50%, -50%);
  //  display: block;
  //  content: "";
  //}
  //&::before {
  //  width: 108px;
  //  height: 108px;
  //  background-image: url("../../../../../public/img/basemaps/echartBackground.png");
  //  z-index: 2;
  //}
}

.content-title {
  display: flex;
  align-items: center;

  &-l {
    width: 4px;
    height: 12px;
    background: linear-gradient(0deg, #bcf8ff, #40ebff);
    border-radius: 0px 0px 0px 0px;
    margin-right: 10px;
  }

  span {
    flex: 1;
    word-break: keep-all;
    font-size: 14px;
    //font-weight: 800;
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
